<template>
  <div class="mb_class">
    <!-- 导航条 -->
    <div class="mb_nav_barbox">
      <van-nav-bar left-arrow @click-left="onClickLeft" title="分类" @click-right="onClickRight">
        <template #right>
          <van-icon name="weapp-nav" size="24" />
        </template>
      </van-nav-bar>
    </div>
    <!-- ./ 导航条 end here-->

    <!-- 分类 -->
    <div class="mb_conbox">
      <!-- 左侧菜单 -->
      <div class="leftbox">
        <van-sidebar v-model="activeKey" @change="changeNav">
          <van-sidebar-item :title="item.cat_title" v-for="(item, index) in cardTitle" :key="index" />
        </van-sidebar>
      </div>

      <!-- 右侧内容 -->
      <div class="rightbox">
        <div class="classbar" id="scrollbox" ref="scrollbar">
          <div class="gridlist" v-for="(item, index) in cardUl" :key="index" :id="'scroll' + index">
            <p class="title"> {{ item.cat_title }}</p>
            <van-grid :column-num="3" :border="false" class="mb_gridlist">
              <van-grid-item v-for="(itemli, indexli) in cardUl[index].children" :key="indexli" :icon="itemli.cat_icon"
                :text="itemli.cat_text"></van-grid-item>
            </van-grid>
          </div>
        </div>
      </div>
    </div>
    <!-- ./ 分类 end here -->

    <!-- Tabbar 标签栏 -->
    <van-tabbar v-model="active" active-color="#017DFF" inactive-color="#666666">
      <van-tabbar-item icon="wap-home" name="mb-home" replace to="mb-home">首页</van-tabbar-item>
      <van-tabbar-item icon="bars" name="mb-class" replace to="mb-class">分类</van-tabbar-item>
      <van-tabbar-item icon="bookmark" name="mb-equit" replace to="mb-equity">权益</van-tabbar-item>
      <van-tabbar-item icon="manager" name="mb-ours" replace to="mb-ours">我的</van-tabbar-item>
    </van-tabbar>
    <!-- ./ Tabbar 标签栏 end here -->

  </div>
</template>


<script>
import { ref, watch } from 'vue';
import { Toast } from 'vant';
import 'vant/es/toast/style';
import { useWindowSize } from '@vant/use';

export default {
  setup() {
    const onClickLeft = () => history.back();
    const onClickRight = () => Toast('查看更多');
    const active = ref('mb-class');
    const activeKey = ref(0);
    // 临时：点击轻提示；应做：点击滚动至对应位置
    const changeNav = (index) => Toast(`标签名 ${index + 1}`);
    const { width, height } = useWindowSize();
    console.log(width.value);

    return {
      active,
      onClickLeft,
      onClickRight,
      activeKey,
      changeNav,
    };
  },

  data() {
    return {
      cardTitle: [
        { cat_title: '常用' },
        { cat_title: '查询' },
        { cat_title: '套餐' },
        { cat_title: '流量' },
        { cat_title: '权益会员' },
        { cat_title: '宽带电视' },
        { cat_title: '手机商城' },
        { cat_title: '家庭' },
        { cat_title: '号卡' },
        { cat_title: '充值' },
        { cat_title: '5G' },
        { cat_title: '基础服务' },
      ],
      cardUl: [
        {
          cat_title: '常用',
          "children": [
            { cat_icon: 'sign', cat_text: '7天流量包', },
            { cat_icon: 'sign', cat_text: '1元流量月包', },
            { cat_icon: 'sign', cat_text: '居家流量包', },
            { cat_icon: 'sign', cat_text: '套餐优惠', },
            { cat_icon: 'sign', cat_text: '宽带办理', },
            { cat_icon: 'sign', cat_text: '1元会员', },
          ]
        },
        {
          cat_title: '套餐',
          "children": [
            { cat_icon: 'sign', cat_text: '7天流量包', },
            { cat_icon: 'sign', cat_text: '1元流量月包', },
            { cat_icon: 'sign', cat_text: '居家流量包', },
            { cat_icon: 'sign', cat_text: '套餐优惠', },
            { cat_icon: 'sign', cat_text: '宽带办理', },
            { cat_icon: 'sign', cat_text: '1元会员', },
          ]
        },
        {
          cat_title: '流量',
          "children": [
            { cat_icon: 'sign', cat_text: '7天流量包', },
            { cat_icon: 'sign', cat_text: '1元流量月包', },
            { cat_icon: 'sign', cat_text: '居家流量包', },
            { cat_icon: 'sign', cat_text: '套餐优惠', },
            { cat_icon: 'sign', cat_text: '宽带办理', },
            { cat_icon: 'sign', cat_text: '1元会员', },
          ]
        },
        {
          cat_title: '权益会员',
          "children": [
            { cat_icon: 'sign', cat_text: '7天流量包', },
            { cat_icon: 'sign', cat_text: '1元流量月包', },
            { cat_icon: 'sign', cat_text: '居家流量包', },
            { cat_icon: 'sign', cat_text: '套餐优惠', },
            { cat_icon: 'sign', cat_text: '宽带办理', },
            { cat_icon: 'sign', cat_text: '1元会员', },
          ]
        },
        {
          cat_title: '宽带电视',
          "children": [
            { cat_icon: 'sign', cat_text: '7天流量包', },
            { cat_icon: 'sign', cat_text: '1元流量月包', },
            { cat_icon: 'sign', cat_text: '居家流量包', },
            { cat_icon: 'sign', cat_text: '套餐优惠', },
            { cat_icon: 'sign', cat_text: '宽带办理', },
            { cat_icon: 'sign', cat_text: '1元会员', },
          ]
        },
        {
          cat_title: '手机商城',
          "children": [
            { cat_icon: 'sign', cat_text: '7天流量包', },
            { cat_icon: 'sign', cat_text: '1元流量月包', },
            { cat_icon: 'sign', cat_text: '居家流量包', },
            { cat_icon: 'sign', cat_text: '套餐优惠', },
            { cat_icon: 'sign', cat_text: '宽带办理', },
            { cat_icon: 'sign', cat_text: '1元会员', },
          ]
        },
        {
          cat_title: '家庭',
          "children": [
            { cat_icon: 'sign', cat_text: '7天流量包', },
            { cat_icon: 'sign', cat_text: '1元流量月包', },
            { cat_icon: 'sign', cat_text: '居家流量包', },
            { cat_icon: 'sign', cat_text: '套餐优惠', },
            { cat_icon: 'sign', cat_text: '宽带办理', },
            { cat_icon: 'sign', cat_text: '1元会员', },
          ]
        },
        {
          cat_title: '号卡',
          "children": [
            { cat_icon: 'sign', cat_text: '7天流量包', },
            { cat_icon: 'sign', cat_text: '1元流量月包', },
            { cat_icon: 'sign', cat_text: '居家流量包', },
            { cat_icon: 'sign', cat_text: '套餐优惠', },
            { cat_icon: 'sign', cat_text: '宽带办理', },
            { cat_icon: 'sign', cat_text: '1元会员', },
          ]
        },
        {
          cat_title: '充值',
          "children": [
            { cat_icon: 'sign', cat_text: '7天流量包', },
            { cat_icon: 'sign', cat_text: '1元流量月包', },
            { cat_icon: 'sign', cat_text: '居家流量包', },
            { cat_icon: 'sign', cat_text: '套餐优惠', },
            { cat_icon: 'sign', cat_text: '宽带办理', },
            { cat_icon: 'sign', cat_text: '1元会员', },
          ]
        },
        {
          cat_title: '5G',
          "children": [
            { cat_icon: 'sign', cat_text: '7天流量包', },
            { cat_icon: 'sign', cat_text: '1元流量月包', },
            { cat_icon: 'sign', cat_text: '居家流量包', },
            { cat_icon: 'sign', cat_text: '套餐优惠', },
            { cat_icon: 'sign', cat_text: '宽带办理', },
            { cat_icon: 'sign', cat_text: '1元会员', },
          ]
        },
        {
          cat_title: '基础服务',
          "children": [
            { cat_icon: 'sign', cat_text: '7天流量包', },
            { cat_icon: 'sign', cat_text: '1元流量月包', },
            { cat_icon: 'sign', cat_text: '居家流量包', },
            { cat_icon: 'sign', cat_text: '套餐优惠', },
            { cat_icon: 'sign', cat_text: '宽带办理', },
            { cat_icon: 'sign', cat_text: '1元会员', },
          ]
        },
      ]
  };
},
};

</script>


<style lang="less">
/* 导航条 */
.mb_nav_barbox {
  position: fixed;
  z-index: 10000;
  top: 0;
  height: auto;
  width: 100%;
  clear: both;
}

/* ./ 导航条 end here */

/* 分类 */
.mb_conbox {
  position: fixed;
  left: 0;
  right: 0;
  top: 46px;
  bottom: 50px;
  display: flex;
  // 1. nowrap 项目不换行（这个是默认值）。
  // 2. wrap 项目在超出容器时进行换行。
  // 3. wrap-reverse 同 wrap 值，只是换成反序方向。
  flex-wrap: nowrap;

  .leftbox {
    // flex：是 flex-grow(定义项目的放大比例，默认为0)、flex-shrink(定义项目的缩小比例，默认为1。)、flex-basis(定义了在分配多余空间之前，项目占据的主轴空间（main size）)的缩写，默认值为0 1 auto。
    flex: var(--van-gray-2) 1 auto;
    height: 100%;

    .van-sidebar::-webkit-scrollbar {
      display: none;
    }

    .van-sidebar {
      height: 100%;

      .van-badge__wrapper {
        white-space: nowrap;
      }

      .van-sidebar-item {
        background: transparent;
      }

      .van-sidebar-item--select {
        background: white;
      }

    }

  }

  .rightbox {
    position: relative;
    height: 100%;
    overflow-y: auto;
    flex: 1;

    .classbar {
      background-color: white;
      padding: 16px 12px;

      .gridlist {
        .title {
          background: #F6F7FC;
          font-size: 12px;
          line-height: 28px;
          font-weight: bold;
          text-align: center;
          border-radius: 12px;
        }
      }
    }

  }

}

/* ./ 分类 end here */

/* xxx */

/* ./ xxx end here */
</style>